/*
  学习目标：子传父 - 花掉爸爸的钱
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    money: 1000,
  };

  handleMakeMoney = () => {
    //  sst
    this.setState({
      money: this.state.money + 1000,
    });
  };

  // 1. 父组件定义一个修改state的函数
  handleCostMoney = (num) => {
    this.setState({
      money: this.state.money - num,
    });
  };

  render() {
    const { money } = this.state;
    return (
      <div>
        <button onClick={this.handleMakeMoney}>点我</button>
        <Child
          money={money}
          // 2. 通过props传递函数
          handleCostMoney={this.handleCostMoney}
        ></Child>
      </div>
    );
  }
}

class Child extends Component {
  render() {
    const { money, handleCostMoney } = this.props;
    return (
      <div>
        爸爸给我钱了{money}
        <button
          onClick={() => {
            // 3. 子组件,通过props接收函数, 并且调用函数
            handleCostMoney(8000);
          }}
        >
          吞金兽要花钱
        </button>
      </div>
    );
  }
}
